<template>
  <div>
    <h1>欢迎来到Ai的世界</h1>
    <el-container>
      <el-main>
        <el-scrollbar>
          <div v-for="message in messages" :key="message.id">
            <p v-if="message.sender === 'user'">你：{{message.text}}</p>
            <p v-else>6组：{{message.text}}</p>
          </div>
        </el-scrollbar>
        <el-row>
          <el-col :span="22">
            <el-input v-model="wen" placeholder="输入你的问题..."></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="sendMessage">发送</el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="sendMessag">重置</el-button>
          </el-col>
        </el-row>
        <!-- 添加加载提示 -->
        <div v-if="isLoading">
          <el-icon name="loading"></el-icon> 加载中...
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {},
      zhi: '',
      messages: [],
      wen: "",
      isLoading: false,
    };
  },
  methods: {
    sendMessag(){
      this.messages=[];
    },
    sendMessage() {
      if (this.wen.trim() !== '') {
        this.messages.push({id: this.messageId++, sender: 'user', text: this.wen});
        this.form.zhi = this.wen;
        this.isLoading = true;
        axios.post('http://localhost:10061/packages/enen', this.form)
            .then(response => {
              // 假设后端返回的结构中，AI 的回复在特定的属性中
              const aiResponse = response.data;
              if (aiResponse) {
                this.messages.push({id: this.messageId++, sender: '6组', text: aiResponse});
              } else {
                this.messages.push({id: this.messageId++, sender: '6组', text: '抱歉，暂时无法获取回复。'});
              }
              this.isLoading = false;
            })
            .catch(error => {
              console.error('请求失败：', error);
              if (error.response && error.response.status === 404) {
                this.messages.push({id: this.messageId++, sender: '6组', text: '请求的资源未找到。'});
              } else if (error.response && error.response.status === 500) {
                this.messages.push({id: this.messageId++, sender: '6组', text: '服务器内部错误，请稍后再试。'});
              } else {
                this.messages.push({
                  id: this.messageId++,
                  sender: '6组',
                  text: '请求出现错误，请检查网络连接或稍后再试。'
                });
              }
              this.isLoading = false;
            });
        this.wen = '';
      }
    }
  }
};
</script>
<style>
#app {

}
</style>